<template>
	<div class="mainbox">
		<div class="leftbox">
			<div class="mySelfCard">
				<div @click="openHead">
					<el-avatar class="leftImg" :src="avatarUrl" :fit="fit"> </el-avatar>
					<el-dialog title="修改头像" :append-to-body="true" :visible.sync="dialogVisible3" width="300px">
						<div class="changeAvatarSpace">
							<el-upload class="avatar-uploader" action="#" closed="closeAvatar" :show-file-list="false"
								:before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-dialog>
				</div>

				<h2 class="animate__animated animate__bounceInDown">
					{{ this.usershow.name
          }}<i @click="dialogVisible = true" class="el-icon-edit"></i>
				</h2>
				<el-dialog title="修改一下吧略略略" :append-to-body="true" :visible.sync="dialogVisible" width="500px">
					<el-form :model="user" :rules="rule">
						<el-form-item prop="name" label="名称">
							<el-input v-model="user.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item prop="sign" label="签名">
							<el-input v-model="user.sign" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeMySelf">确 定</el-button>
				</el-dialog>
				<p class="animate__animated animate__backInUp">
					{{ this.usershow.sign }}
				</p>
			</div>
			<div class="littleCard">
				<div class="IconBox01"></div>
				<div class="IconBox02"></div>
				<div class="IconBox03"></div>
				<div class="IconBox04"></div>
			</div>
			<div class="columnBlog">
				<div class="columnTitle">
					<h2 class="animate__animated animate__zoomInLeft">博客栏目</h2>
				</div>
			</div>
		</div>
		<div class="blogBox">
			<el-col :span="20" v-for="(blog, index) in Blogs" :key="blog.id" :offset="(index = 0)">
				<el-card class="blogCard" shadow="always">
					<a :href="'#/showBlog?id=' + blog.id">
						<h1 class="animate__animated animate__zoomInDown">
							{{ blog.title }}
						</h1>
					</a>
					<p class="p2">{{ blog.summary }}</p>
					<p>{{ blog.time }}</p>
				</el-card>
				<!-- <el-divider></el-divider> -->
			</el-col>
			<el-pagination class="pageBox" background layout="prev, pager, next" :total="total"
				:current-page="currentPage" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<div class="rightBox">
			<div class="picShow">
				<el-carousel :interval="4000" type="card" height="180px">
					<el-carousel-item v-for="(img, index) in imgList" :key="index">
						<el-image :src="img.url" :fit="fit"></el-image>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="collectionBox">
				<div class="collectionTitle">
					<h2 class="animate__animated animate__zoomInLeft">外站收藏</h2>
				</div>
			</div>
			<div class="rememberBox">
				<div class="rememberTitle">
					<h2 class="animate__animated animate__slideInUp">
						备忘录<i @click="dialogVisible1 = true" class="el-icon-edit"></i>
					</h2>
					<i @click="openRememberSpace" class="el-icon-s-order"></i>
					<el-dialog title="需要记什么东西捏" :append-to-body="true" :visible.sync="dialogVisible1" width="500px">
						<el-input type="textarea" :rows="5" placeholder="随便写写吧....." v-model="remember.content"
							maxlength="15" show-word-limit>
						</el-input>
						<el-button @click="dialogVisible1 = false">不想记了</el-button>
						<el-button type="primary" @click="addRemember">我要记住</el-button>
					</el-dialog>
					<el-dialog title="备忘空间" :append-to-body="true" :visible.sync="dialogVisible2" width="600px"
						class="RememberCard">
						<div class="RememberSpace">
							<el-table :data="allRemembers" style="width: 570px" height="430" lazy>
								<el-table-column label="日期" width="180">
									<template slot-scope="scope">
										<span style="margin-left: 10px">{{ scope.row.time }}</span>
									</template>
								</el-table-column>
								<el-table-column label="内容" width="260">
									<template slot-scope="scope">
										<el-tag size="medium">{{ scope.row.content }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="70">
									<template slot-scope="scope">
										<el-button size="mini" type="danger" @click.native.prevent="
                        deleteRemember(scope.$index, scope.row.id, allRemembers)
                      ">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>

						<el-button @click="dialogVisible2 = false">取消</el-button>
						<el-popconfirm confirm-button-text="我就要" @confirm="clearRemember" cancel-button-text="不敢了"
							icon="el-icon-info" icon-color="red" title="请不要作死！">
							<el-button type="danger" slot="reference">清空</el-button>
						</el-popconfirm>
					</el-dialog>
				</div>
				<el-row>
					<el-col class="someRememberList" :span="24" v-for="(a, index) in someRemember" :key="a.id"
						:offset="(index = 0)">
						<div class="information-title">{{ a.content }}</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	// import AvatarUploader from "../components/AvatarUploader/index.vue";
	export default {
		// components: { AvatarUploader },
		name: "Home",
		data() {
			return {
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisible3: false,
				imageUrl: "",

				avatarUrl: "",

				usershow: {
					name: "",
					sign: "",
					phone: "",
				},
				user: {
					name: "",
					sign: "",
					phone: "",
				},
				rule: {
					name: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					sign: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
				},

				remember: {
					id: "",
					content: "",
					time: "",
				},
				someRemember: [],
				addRemembers: [],
				allRemembers: [],
				currentPage: 1, //初始页
				pageSize: 6, //    每页的数据
				total: 1,
				Blogs: [],
				fit: "cover",
				blog: {
					title: "",
				},

				rules: {
					title: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
				},
				imgList: [{
						url: "http://120.77.71.211:9011/72ad40dde343a9b04c24929932e927ad.jpeg",
					},
					{
						url: "http://120.77.71.211:9011/02882e28cbe35042f7063b7c4331abed.gif",
					},
					{
						url: "http://120.77.71.211:9011/55aa725fc4ac1bc464a573738892a2ff.jpeg",
					},
				],
			};
		},
		created() {
			this.showDataAll(1, 6);
			this.showAvatar();
			this.getUSer();
			this.someRemembers();
		},
		methods: {
			openHead() {
				this.dialogVisible3 = true;
			},
			closeAvatar() {
				this.imageUrl = "";
			},
			beforeAvatarUpload(file) {
				//上传前的函数
				//上传前对图片类型和大小进行判断
				const isJPG = file.type === "image/jpeg" || file.type === "image/png";
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 2MB!");
				}
				//校验成功上传文件
				if (isJPG && isLt2M == true) {
					console.log(file);

					//将文件转化为formdata数据上传
					let fd = new FormData();
					fd.append("file", file);

					// post上传图片

					this.$axios({
							method: "post",
							url: "http://120.77.71.211:9011/api/uploadAvatar",
							data: fd,
							headers: {
								"content-type": "multipart/form-data",
							},
						})
						.then((res) => {
							this.imageUrl = res.data.data;
							this.avatarUrl = res.data.data;
						})
						.catch((error) => {
							this.$message.error("头像上传失败，请重新上传!");
						});
				}
				return isJPG && isLt2M;
			},

			showAvatar() {
				this.$axios.get("http://120.77.71.211:9011/api/showAvatar").then((resp) => {
					this.avatarUrl = resp.data.data;
				});
			},

			openRememberSpace() {
				this.dialogVisible2 = true;
				this.$axios.get("http://120.77.71.211:9011/api/allRemember").then((resp) => {
					this.allRemembers = resp.data;
				});
			},
			changeMySelf() {
				this.user.name = this.user.name.replace(/\s*/g, "");
				if (this.user.name.length > 0) {
					this.$axios
						.post("http://120.77.71.211:9011/api/updateUser", this.user)
						.then((resp) => {
							if (resp.data.code == 200) {
								this.$axios
									.get(
										"http://120.77.71.211:9011/api/findUserByPhone?phone=" +
										this.user.phone
									)
									.then((resp) => {
										if (resp.data.code == 200) {
											this.usershow = resp.data.data;
											localStorage.setItem("phone", this.usershow.phone);
											localStorage.setItem("name", this.usershow.name);
											localStorage.setItem("sign", this.usershow.sign);
											this.getUSer();
											this.dialogVisible = false;
										}
									});
							} else {}
						});
				}
			},
			addRemember() {
				this.$axios
					.post("http://120.77.71.211:9011/api/addRemember", this.remember)
					.then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.message,
								type: "success",
							});
							this.remember = {};
							this.someRemember = [];
							this.someRemembers();
							this.dialogVisible1 = false;
						} else {
							this.$message.error(resp.data.message);
						}
					});
			},

			clearRemember() {
				this.$axios
					.get("http://120.77.71.211:9011/api/clearRemember")
					.then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.message,
								type: "success",
							});
						}
						this.allRemembers = [];
						this.someRemember = [];
					});
			},

			deleteRemember(index, id, rows) {
				this.$axios
					.get("http://120.77.71.211:9011/api/deleteRemember?id=" + id)
					.then((resp) => {
						if (resp.data.code == 200) {
							this.someRemembers();
							this.$message({
								message: resp.data.message,
								type: "success",
							});
						}
						rows.splice(index, 1);
					});
			},
			someRemembers() {
				this.$axios.get("http://120.77.71.211:9011/api/someRemember").then((resp) => {
					this.someRemember = resp.data;
				});
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				// 点击每页显示的条数时，显示第一页
				this.showDataAll(this.currentPage, this.pageSize);
			},
			showDataAll(currentPage, pageSize) {
				var _this = this;
				this.$axios
					.get(
						"http://120.77.71.211:9011/api/getBlogList/" +
						currentPage +
						"/" +
						pageSize
					)
					.then((resp) => {
						_this.Blogs = resp.data.list;
						_this.total = resp.data.total;
					});
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				// 点击每页显示的条数时，显示第一页
				this.showDataAll(this.currentPage, this.pageSize);
			},

			getUSer() {
				this.$axios
					.get("http://120.77.71.211:9011/api/myself")
					.then((res) => {
						this.usershow.name = res.data.data.name;
						this.usershow.sign = res.data.data.sign;
						this.user.phone = res.data.data.phone;
					});
			},
		},
		mounted() {

		},

	};
</script>

<style lang="css" scoped>
	@import '../assets/css/home.css';
</style>
